<script setup>
    import {ref} from 'vue';
    const isShow = ref(false)
    const mark = ref(20)
    const isLogin = ref(true)
</script>

<template>
<div>
    <!-- v-show 是调整 display:none/block 所以会导致如果对应标签有 display: block !important 那么就会失效 -->
    <div v-show="isShow" class="red"></div>
    <!-- v-if 是直接删除/添加 -->
    <div v-if="isShow" class="green"></div>
    <!-- 所以 如果频繁显示/隐藏 那么就使用 v-show 否则就是 v-if -->
    
    <!-- v-if v-else-if v-else -->
    <div v-if="mark >= 90">优</div>
    <div v-else-if="mark >= 70">良</div>
    <div v-else>差</div>

    <!-- 登入前与登入后用户提示 -->
    <div v-if="isLogin">xxx, 欢迎光临</div>
    <div v-else>请先登入</div>
</div>
</template>


<style scoped>
.red, .green {
    width: 200px;
    height: 200px;
}
.red {
    background-color:red;
    /* display: block !important; */
}
.green {
    background-color:green;
}
</style>